<template>
  <div class="wrap">
    <div v-if="resCashRecordList.length > 0">
      <div class="productionList" v-for="(item, index) in resCashRecordList" :key="index">
        <div class="proTitle">
          {{ item.payTime }}
        </div>
        <div
          class="productionItem"
          v-for="(item_, index_) in item.goodsList"
          :key="index_"
        >
          <div class="proIntroWrap">
            <div class="proIntroLeft">
              <img :src="$imgUrl + item_.listImgUrl" alt="" class="proPoster" />
            </div>
            <div class="proIntroRight">
              <div class="proIntro">
                {{ item_.goodsName }}
              </div>
              <div class="workTime">
                <div class="timeLeft">{{ item_.specsName }} ×{{ item_.payNum }}</div>
                <div class="saleRight">
                  <em class="moneyLogo">￥</em>{{ item_.price }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="totalCount">
          <em class="realPay">总计</em>
          <em class="realMoney">￥{{ item.totalPayPrice }}</em>
        </div>
      </div>
    </div>
    
    <div style="text-align:center;font-size:14px;color:#000;padding-top:20px;" v-else>暂无进货记录</div>
  </div>
</template>

<script>
import { RadioGroup } from "vant";
import { apiPlatformOrderList } from "@/request/api"; // api接口
export default {
  name: "App",
  data() {
    return {
      showMask: false,
      reqpageSize: 5, //分页条数
      reqPageNum: 0, //当前第几页
      noMore: false,
      resCashRecordList: [], //押金缴纳记录列表
    };
  },
  mounted() {
    document.querySelector("body").setAttribute("style", "background-color:#F2F4FA");
    window.addEventListener("scroll", this.handleScroll, true);
    this.getCashRecordList();
  },
  methods: {
    //分页 监听滑动事件
    handleScroll() {
      let Top = $(window).scrollTop();
      let WinH = $(window).height();
      let DocH = $(document).height();
      if (DocH - (Top + WinH) <= 0) {
        if (this.noMore) {
          return;
        }
        this.getCashRecordList();
      }
    },
    //查询进货列表:
    getCashRecordList() {
      var page = (this.reqPageNum += 1);
      console.log("page", page);
      apiPlatformOrderList({
        pageNum: page,
        pageSize: this.reqpageSize,
      }).then((res) => {
        if (res.data.rows.length == 0) {
          this.noMore = true;
          return;
        }
        var dataRes = res.data.rows;
        this.resCashRecordList = [...this.resCashRecordList, ...dataRes];
        console.log("resCashRecordList-进货列表", this.resCashRecordList);
      });
    },
  },
  created() {},
  components: {
    [RadioGroup.name]: RadioGroup,
  },
};
</script>

<style scoped>
.productionList {
  width: calc(92% - 30px);
  background: #ffffff;
  border-radius: 20px;
  padding: 15px 15px 5px 15px;
  margin-bottom: 10px;
  margin-top: 10px;
  margin-left: 3.5%;
}
.productionItem {
  margin-bottom: 10px;
}
.proTitle {
  width: 100%;
  font-size: 15px;
  font-weight: 500;
  color: #000;
}
.proIntroWrap {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}
.proIntroLeft {
  width: 32%;
  height: 75px;
}
.proPoster {
  width: 100px;
  height: 75px;
  border-radius: 20px;
}
.proIntroRight {
  width: 65%;
  margin-top: 10px;
}
.proIntro {
  font-size: 14px;
  font-weight: 400;
  color: #181818;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
em {
  font-style: normal;
}
i {
  display: inline-block;
  width: 1px;
  height: 10px;
  background-color: #ff5252;
  margin: 0px 2px;
}
.workTime {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 400;
  color: #999999;
  margin-top: 15px;
}
.timeLeft {
}
.saleRight {
  color: #ff5757;
  font-size: 15px;
}
.moneyLogo {
  font-size: 10px;
}
.totalCount {
  color: #999999;
  font-size: 13px;
  text-align: right;
  width: 100%;
  margin-top: 20px;
  padding-bottom: 10px;
}
.realPay {
  color: #181818;
  padding-left: 10px;
}
.realMoney {
  color: #ff5757;
}
</style>
